<!--  -->
<template>
  <div class="browse-list">
    <block v-for="(item, index) in browselists" :key="index">
      <div class="browse-item">
        <div class="browse-type flex-a-c flex-j-sb">
          <!-- <div class="left">页面类型：{{ item.type_name }}</div> -->
          <div class="right">{{ item.created_at }}</div>
        </div>
        <div class="browse-port">
          <span class="name">页面类型</span>{{ item.port }}
        </div>
        <div class="browse-port">
          <span class="name">访问端口</span>{{ item.port }}
        </div>
        <div class="browse-port flex-a-c">
          <span class="name">页面URL</span>
          <div class="browse-url-btn visit" @click="browseTo(item.url)">访问</div>
          <div class="browse-url-btn" v-clipboard:copy="item.url" v-clipboard:success="onCopy">复制</div>
        </div>
        <!-- <div class="browse-url flex-a-c">
          <p>页面URL：</p>
          <div class="browse-url-btn visit" @click="browseTo(item.url)">访问</div>
          <div class="browse-url-btn" v-clipboard:copy="item.url" v-clipboard:success="onCopy">复制</div>
        </div> -->
      </div>
    </block>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  name: "",
  props: {
    browselists: Array
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    browseTo(url) {
      window.location.href = url;
    },
    onCopy() {
      this.$toast({
        message: "复制成功",
        position: "bottom",
        duration: 5000
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="scss">
.browse-list {
  padding:10px 0 0 0;
  margin:0 12px;
  .browse-item {
    // padding: 0.9375rem 1rem 1.1875rem 1rem;
    padding:15px 10px 18px 10px;
    // border-bottom: 0.0625rem solid #f2f2f2;
    border-radius: 8px 8px 8px 8px;
    margin:0 0 10px 0;
    background: #FFFFFF;
    .browse-type {
      margin-bottom: 1.125rem;
      padding:0 0 14px 0;
      border-bottom: 1px solid #F0F0F1;
      
      .left {
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: #202020;
      }

      .right {
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #00001C;
      }
    }

    .browse-port {
      font-weight: 400;
      font-size: 13px;
      color: #00001C;
      text-align: left;
      margin-bottom: 14px;
      span {
        font-size: 13px;
        color: #6E6E79;
        padding:0 17px 0 0;
      }
    }
    .browse-url-btn {
      color:var(--themeBaseColor);
      font-size: 13px;
      padding:0 10px 0 0;
    }
    .browse-url {
      font-weight: 400;
      font-size: 13px;
      color: #00001C;
     
      // .browse-url-btn {
      //   background: #f14e4e;
      //   border-radius: 0.125rem;
      //   padding: 0.3125rem 0.5rem 0.25rem 0.5625rem;
      //   font-size: 0.625rem;
      //   line-height: 0.625rem;
      //   color: #fff;
      //   cursor: pointer;

      //   :last-child {
      //     margin-left: 1.125rem;
      //   }
      // }

      // .visit {
      //   margin-right: 1.125rem;
      // }
    }
  }
}

/* @import url(); 引入公共css类 */
</style>
